<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong> {{list.length}} </strong></span>
    <ul class="filters" @click="toggle">
      <li>
        <a @click="isSel='all'" :class="{selected:isSel=='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="isSel='no'" :class="{selected:isSel=='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isSel='yes'" :class="{selected:isSel=='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
    data(){
        return {
            isSel:'all'
        }
    },
    methods:{
        toggle(){
            this.$emit('toggleTask',this.isSel)
        }
    },
    props:['list']
}
</script>